<template>
  <section>
    <drag-div>
      <div slot="left" class="m">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        ></el-input>
        <cm-scroll>
          <el-tree
            class="filter-tree"
            :data="columnTree"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            :highlight-current="showTree"
            :style="maxHeight"
            @node-click="handleNodeClick"
            :expand-on-click-node="false"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}<span style="margin-left: 8px;">{{'(ID:'+(data.id)+')'}}</span></span>
            </span>
          </el-tree>
        </cm-scroll>
      </div>
      <div slot="right" class="m" style="overflow: hidden">
        <el-form :rules="rulesSave" ref="formInfo" :model="formInfo" label-width="130px">
          <el-row>
            <el-col :span="24" v-if="formInfo.columId">
              <el-form-item label="栏目ID:">
                <span>{{formInfo.columId}}</span>
              </el-form-item>
            </el-col>

            <el-form-item label="栏目管理名称:">
              <span class="for-input">{{formInfo.categoryTitle}}</span>
            </el-form-item>

            <el-form-item label="负责人:" prop="chargeId">
              <el-select v-model="formInfo.chargeId" filterable placeholder="请选择">
                <el-option
                  v-for="item in userList"
                  :key="item.userId"
                  :label="item.name"
                  :value="item.userId">
                  <span style="float: left">{{ item.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.roleName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="接收短信手机号:" prop="telephone">
              <el-input class="for-input" v-model="formInfo.telephone"></el-input>
            </el-form-item>

            <el-form-item label="间隔时间:" prop="days">
              <el-input type="number" class="for-input" placeholder="几天提醒一次"
                        v-model="formInfo.days">
                <template slot="append">天</template>

              </el-input>
            </el-form-item>
            <el-form-item label="类型:" prop="type">
              <el-select v-model="formInfo.type" filterable placeholder="请选择">
                <el-option
                  v-for="item in types"
                  :key="item.value"
                  :label="item.label"
                  :disabled="item.state==='0'"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态:" prop="openFlag">
              <el-switch
                v-model="formInfo.openFlag"
                active-text="开启"
                :active-value= 1
                :inactive-value= 0
                inactive-text="停用">
              </el-switch>
            </el-form-item>
          </el-row>
            <el-form-item style="margin-top: 40px">
              <el-button type="primary" size="small" @click="addOrUpdateNoticeSetting">
                保存
              </el-button>
            </el-form-item>
        </el-form>
      </div>
    </drag-div>
  </section>
</template>
<script>

  import {mapGetters} from "vuex";
  import Status from "@/libs/status";

  export default {
    name: "column",
    created() {
      this.getColumnTree();
    },
    mounted() {
      this.getUserList();
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    data() {
      return {
        showTree: true,
        pageHeight: window.innerHeight,
        columnTypes: [
          {label: '列表', value: 1},
          {label: '单页', value: 2}
        ],
        parentId: "",
        types: this.getDictionary('NOTICE_TYPE'),
        tree: {
          placeholder: "模糊搜索",
          props: {
            value: "id", // ID字段名
            label: "label", // 显示名称
            children: "children" // 子级字段名
          },
          accordion: true,
          clearable: true
        },
        imageUrl1: "",
        options: this.getDictionary('LMSX'),
        value: '',
        is: "",
        isShow: true,
        radio: 1,
        filterText: "",
        defaultProps: {
          children: "children",
          label: "label"
        },
        setProperty: {
          children: "children",
          label: "label",
          checkStrictly: true,
          value: "id"
        },
        clickID: "",
        rulesSave: {
          days: [{required: true, message: "请输入提醒间隔时间", trigger: "blur"}],
          telephone: [{required: true, message: "请输入手机号", trigger: "blur"}],
          type: [{required: true, message: "请选择类型", trigger: "blur"}],
          chargeId: [{required: true, message: "请选择负责人", trigger: "blur"}]
        },
        showEditPage: true,
        showNewPage: false,
        firstResId: 13,
        //默认当前系统
        selectAppKey: window.sessionStorage.getItem("appKey"),
        formInfo: {
          columId: 0, // 栏目id
          categoryTitle:"", // 栏目名称
          chargeId: '',// 负责人id
          days: "3",// 天数
          telephone: "",// 手机号
          openFlag: 1,// 状态
          type: 'NOTICE_TYPE_STATION'
        },
        userList: []
      };
    },
    computed: {
      ...mapGetters({
        columnTree: "columnTree",
      }),
      maxHeight() {
        return {height: (this.pageHeight - 216) + "px"};
      }
    },

    methods: {
      getUserList() {
        this.API.userListUsingPOST({searchDto: {pageSize:1000}}) .then(res=>{
           this.userList = res.data.list
        })
      },
      //回显设置
      getList() {
        let param = {
          id: this.formInfo.columId
        }
        this.API.getNoticeSetDetailByComidUsingPOST(param).then(res=>{
          if(res.data){
            this.formInfo = Object.assign(this.formInfo,res.data)
          }else {
            this.formInfo={
              categoryTitle:"", // 栏目名称
              chargeId: '',// 负责人id
              days: "3",// 天数
              telephone: "",// 手机号
              openFlag: '',// 状态
              type: 'NOTICE_TYPE_STATION'
            }
          }
        })
      },
      //  获取栏目
      getColumnTree() {
        this.$store
          .dispatch("columnTreeUsingGETS")
          .then(ret => {
            this.firstResId = ret.data[0].id;
          });
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      //  新增消息提醒设置
      addOrUpdateNoticeSetting() {
        let formInfo = false
        this.$refs["formInfo"].validate(valid => {
          formInfo = valid
        })
        if (!formInfo) return
        this.API.saveOrupdateNoticeSetUsingPOST({saveNoticeSetDto:this.formInfo}).then(res=>{

        })
      },

      handleNodeClick(val) {
        this.clickID = val.id;
        this.formInfo.columId =val.id
        this.formInfo.categoryTitle =val.label
        if (this.showNewPage == true) {
          this.showNewPage = false;
          this.showEditPage = true;
        } else if (this.showEditPage == true) {
          this.getList()
        }
      },
      reset() {
        this.$refs['formInfo'].resetFields()
      }
    },
    components: {

    }
  };
</script>
<style scoped lang="less">
  /*滚动条样式*/
  /deep/ .el-scrollbar__bar.is-vertical {
    width: 6px !important;
  }

  /deep/ .el-scrollbar__bar.is-horizontal {
    height: 6px !important;
  }

  .filter-tree {
  }

  /*滚动条*/
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .for-input {
    width: 260px;
  }

  .el-select {
    width: 260px !important;
  }

  .lab-form {
    float: left;
  }

  .avatar-uploader {
    .el-upload--text {
      img {
        object-fit: cover;
      }

      .avatar-uploader-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        line-height: 30px;
        color: #ccc;

        &::before {
          font-weight: bold;
        }

        span {
          font-size: 15px;
          display: block;
          margin-top: 5px;
        }
      }
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 178px;
    text-align: center;
    border: 1px solid #e9e9e9;
    border-radius: 5px;
  }
</style>
